<!-- 补签 -->
<template>
	<view class="contact">
		<view class="head-waybill">
			<view class="waybill">
			<p class="head-text">已签收的订单可以在此补传图片</p>
			<p class="head-input">输入运单号</p>
			<span style="display: inline-block;"><input type="text" v-model="waybillNumber" class="head-input-number" style="background-color: #ebebeb;"/><button @click="search()" style="width: 60px;background-color: antiquewhite;position: absolute;top:74px;left:290px;font-size:14px;background-color: #ffaa00;color: #ffffff;">搜索</button></span>
			</view>
		</view>
		<view class="head-context">
			<div class="head-info">
				<p><span class="head-number" style="position: relative;top: -10px;">运单号</span><span class="number" disabled>{{items.waybillNumber}}</span></p>
				<p><span style="letter-spacing:7px;position: relative;top: -10px;">订单号</span><input type="text" class="number" disabled></input></p>
				<p><span style="letter-spacing:7px;position: relative;top: -10px;">签收人</span><input type="text" class="number" style="background-color: #ebebeb;" v-model="items.signForName"  placeholder="请签收人姓名"></input></p>
				<p><span style="letter-spacing:1px;position: relative;top: -10px;">签收证件</span><input type="text" class="number" style="background-color: #ebebeb;" v-model="items.signCertificate" placeholder="请签收人证件号"></input></p>
				<p><span style="letter-spacing:7px;position: relative;top: -10px;">核销号</span><input type="text" class="number" disabled></input></p>
			</div>
		</view>
		<view class="reason-context">
		</view>
		<view style="margin-left: 10px;margin-top: 10px;">
			<button  @click="handleToNature">签名</button>
		</view>
		<view class="photo-context">
			<p class="photo-text" style="display: flex; align-items: center;">
			    拍照
			    <span style="margin-left: 50px;">
					<checkbox-group @change="checkboxChange">
			        <label class="checkbox-item" style="display: inline-block;">
			            <checkbox value="true" checked="true" class="checkbox-checked" @change="toggleRememberMe" :checked="rememberMe">是否核销</checkbox>
			            
			        </label>
					</checkbox-group>
			    </span>
			    <span class="sum" style="margin-left: 140px;">{{picture.length}}/5</span>
			</p>
				<view style="margin-top: 10px;display: flex;flex-direction: row;">
				<view v-for="(image, index) in picture" :key="index" class="image-item" @click="previewImage(index)" >
					<view class="delete-button" @click.stop="removeImage(index)">
					 <image src="../../../static/叉号.png" style="width: 20px;height: 20px;position: relative;top: -8px;left: 60px;" ></image>
					</view>
				      <image :src="image" style="width: 80px; height: 80px;"></image>
				</view>
				<view class="photo" v-if="picture.length<5"><image src="../../../static/相机.png" class="photo-icon" @click="chooseImages"></image></view>
			</view>
		</view>
		<view class="end" >
			<button class="end-button" @click="addClick">保存</button>
		</view>
	</view>
</template>

<script>
	import {updatesign,signIn} from '@/api/sign.js';
	export default {
		data() {
			return {
				  images: [] ,// 存储选中的图片路径,
				  items:{},
				  signer:'',//签收人姓名
				  signingDocument:'',//签收人证件
				  req:{
					  file:'',
					  fileList:'',
				  },
				  // fileList:[],
				  picture:[],//存储后的路径
				  pictureString:'',
				  imageUrl:'',
				  waybillNumber:'',
				  userParam:{}
			}
		},
		onLoad(options) {
					this.businessId=options.id
					this.phone=options.phone
					uni.$on('img', this.handleImageUpdate);
			},
			onUnload() {
			   // 取消监听事件
			   uni.$off('img', this.handleImageUpdate);
			 },
		mounted(){
			
		},
		methods: {
			removeImage(index) {
			     this.picture.splice(index, 1); // 从数组中删除图片
			   },
			previewImage(index) {
			      uni.previewImage({
			        current: index, // 当前显示图片的索引
			        urls: this.picture // 需要预览的图片链接列表
			      });
			    },
			handleImageUpdate(data){
				if(data!=''){
					this.picture.push(data);
					console.log(this.picture)
				}
			},
			// removeImage(index) {
			//       // 从数组中移除指定索引的图片
			//       this.images.splice(index, 1);
			//     },
			search(){
				signIn({waybillNumber: this.waybillNumber}).then(res =>{
					this.items=res.data.data;
					this.images=this.items.fileList;
					// 假设index是你想要检查的索引位置
					let index = 0; // 或者其他任何有效的索引值
					 
					// 检查this.images数组中index位置的元素是否是一个空字符串
					if (this.images[index] === "") {
					    // 如果是空字符串，则从this.images数组中剔除该元素
					    this.images.splice(index, 1);
						this.images=[]
						console.log(this.images);
					}
					 if (this.images.length > 0) {
					     for (const image of this.images) {
					         // 将每个元素推入this.picture数组
					         this.picture.push(image);
					     }
					 }
					
					if(res.data.data.status===400){
						uni.showToast({
						        title: res.data.data.errorMessage,
						        icon: 'none',
						    });
						 return; // 如果为空，则不执行后续操作
					}
				}).catch((error) => {
				});
				
			},
			handleToNature(){
				uni.navigateTo({
				    url: '/pages/index/sign/signature' // 请注意，这里的url应为相对路径，且以'/'开头
				});
			},
			addClick(){
				const that = this;
				if(this.images.length<3){
					uni.showToast({
					        title: '至少需要上传三张照片！',
					        icon: 'none',
					    });
					 return; // 如果为空，则不执行后续操作
				}
				 if (!this.items.signForName) {
						uni.showToast({
						        title: '请填写证件人',
						        icon: 'none',
						    });
				        return; // 如果为空，则不执行后续操作
				}
				
				this.req.id=this.items.signId
				this.req.signer=this.items.signForName
				this.req.signingDocument=this.items.signCertificate
				this.req.type=1
				this.req.signingTime=new Date();
				this.req.fileList=this.picture.toString();
				this.req.file=this.picture.toString();
				console.log(this.req.file);
				updatesign(this.req).then(res =>{
					this.visible = false;
					this.$emit('add-item', 1);
					if(res.data.code===20000){
						uni.showToast({
							        title: '签收成功',
							        icon: 'success',
						});
						const vm = this;
						uni.getStorage({
						  key: 'userParams_key', // 之前保存数据时使用的键
						  success: function (res) {
							  console.log('获取到的用户参数：', res.data);
							  vm.userParam=res.data;
						      // 或者，如果你在一个箭头函数中，this 会自动绑定到外部作用域（比如 Vue 实例）
						      // 但由于我们在 success 回调中，这里需要使用一个变量来保存引用
						   uni.reLaunch({
						       url: '/pages/index/index?userName='+vm.userParam.userName+'&phone='+vm.userParam.phone+'&userId='+vm.userParam.userId+'&subaccount='+vm.userParam.subaccount ,// 请注意，这里的url应为相对路径，且以'/'开头
						   });
						      // 更新页面的状态
						    // 你可以在这里使用获取到的数据，比如更新页面的状态或者执行其他逻辑
						  },
						  fail: function (err) {
						    uni.showToast({
						    	        title: '账号下线,请重新登录',
						    	        icon: 'error',
						    	    });
						    // 处理获取数据失败的情况，比如显示一个错误提示
						  }
						});
					}
					if(res.data.data.status===400){
						uni.showToast({
							        title: res.data.data.errorMessage,
							        icon: 'none',
							    });
						return;
					}
				}).catch((error) => {
				    // 请求失败
				    console.error('签收失败', error);
				    uni.showToast({
				        title: '签收失败，请重试',
				        icon: 'none',
				    });
				});
			},
			
			chooseImages() {
			      uni.chooseImage({
			        count: 9, // 允许选择图片的数量，默认为9
			        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图
			        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机
			        success: (res) => {
						 // 获取新选择的图片路径
						const newImages = res.tempFilePaths;
						this.images = this.images.concat(res.tempFilePaths);
						// 遍历新选择的图片，并检查是否已上传或已选择
						newImages.forEach((filePath) => {
					    this.uploadFile(filePath);
						
					  });
			        },
					
			      });
				  
			    },
				uploadFile(filePath) {
				      uni.uploadFile({
				        url: 'https://image.ff5630.com/upload/buy/upload', // 仅为示例，非真实的接口地址
				        filePath: filePath,
				        name: 'file',
				        formData: {
				          user: 'test'
				        },
				        success: (uploadFileRes) => { // 使用箭头函数来保持this的上下文
						try {
							// 首先检查响应是否可能是 HTML
							        if (uploadFileRes.data.startsWith('<')) {
							          throw new Error('服务器返回了 HTML 响应，而不是预期的 JSON。');
							        }
						          // 解析服务器返回的JSON响应
						          const responseObj = JSON.parse(uploadFileRes.data);
						          const uploadedImageUrl = responseObj.data; // 假设服务器返回的是图片的URL
						 
						          // 检查并添加URL到picture数组（避免重复）
						          const completeUrl = uploadedImageUrl.startsWith('http://') || uploadedImageUrl.startsWith('https://')
						            ? uploadedImageUrl
						            : 'https://' + uploadedImageUrl; // 根据实际情况调整URL格式
						 
						          if (!this.picture.includes(completeUrl)) {
						            this.picture.push(completeUrl);
						          }
								  console.log(this.picture)
						          console.log('上传成功，图片URL：', completeUrl);
						 
						          // 其他处理上传成功后的逻辑可以在这里添加
						 
						        } catch (error) {
						          console.error('解析上传响应失败：', error);
						        }
						  const urlStr=uploadFileRes.data;
						  const startIndex = urlStr.indexOf('"data":"') + '"data":"'.length; // 找到"data":"并跳过它
						  const endIndex = urlStr.indexOf('"', startIndex); // 找到从startIndex开始的第一个"
						   
						   const rawImageUrl = urlStr.substring(startIndex, endIndex);
						    
						   // 检查URL是否已经是完整的（以http://或https://开头）
						   if (!rawImageUrl.startsWith('http://') && !rawImageUrl.startsWith('https://')) {
						     this.imageUrl = 'https://' + rawImageUrl;
						   } else {
						     this.imageUrl = rawImageUrl;
						   }
						  if (!this.picture.includes(this.imageUrl)) {
						       this.picture.push(this.imageUrl);
						   }
						   console.log(this.imageUrl)
						   console.log(this.picture)
						  // 提取URL=
				          // 处理上传成功后的逻辑
				        },
				        fail(err) {
				          console.error('上传失败：', err);
				        }
				      });
					  }
		}
	}
</script>

<style>
@import "signIn.css";
</style>
